$(function () {
    let socket;
    let selected_user_id = 0;//选中私聊用户
    // var readyState = ["connecting", "connected", "closing", "closed"];
    /* 打包信息 */
    function package_message(msg, type, to_id = 0) {
        let msg_data = {
            'group': 'admin',
            'msg': msg,
            'type': type,
            'from_id': user_data.id,
            'from_username': user_data.username,
            'from_head_img': user_data.head_img,
        }
        msg_data.to_id = (type == 'chat_private') ? selected_user_id : to_id;
        return JSON.stringify(msg_data);
    }

    /* 打开连接事件 */
    $("#open-link").click(function () {
        $("#open-link").hide();
        $("#close-link").show();
        try {

            /* 连接 */
            socket = new WebSocket("ws://127.0.0.1:2348");
            /* 绑定事件 */
            socket.onopen = function () {
                //发送进入聊天的绑定请求
                let msg_data = package_message('link-success', 'link-in');
                socket.send(msg_data);
            };

            socket.onmessage = function (e) {
                let data = JSON.parse(e.data);
                let html = '';
                // console.log(data);
                switch (data.type) {
                    case 'ping': //心跳回应
                        let msg_data = package_message('', 'pong');
                        socket.send(msg_data);
                        break;

                    case 'link-in': //绑定数据
                        //进入聊天
                        html = "<br />" + ' <span class="chat_username"> 【' + data.from_username + '】 加入了群聊</span>';
                        $("#msg_public").append(html);
                        break;

                    case 'link-out'://有人退出聊天
                        html = "<br />" + ' <span class="leave_msg"> 【' + data.from_username + '】 离开了房间</span>';
                        $("#msg_public").append(html);
                        //聊天窗口下拉保持最下
                        $('#msg_public').scrollTop($('#msg_public')[0].scrollHeight);
                        break;

                    case 'chat_public'://群聊
                        //写入聊天内容
                        $("#msg_public").append("<br/><span class='chat_username'>【" + data.from_username + "】:</span>" + data.msg);
                        //聊天窗口下拉保持最下
                        $('#msg_public').scrollTop($('#msg_public')[0].scrollHeight);
                        break;

                    case 'chat_private':
                        //TODO 私聊
                        $("#msg_private").append("<br/><span class='chat_username'>【" + data.from_username + "】:</span>" + data.msg);
                        $('#msg_private').scrollTop($('#msg_private')[0].scrollHeight);
                        break;

                    case 'user_list'://TODO 用户列表更新,后续改成动态加载
                        $('#user_list').empty();//清除列表记录
                        // console.log(data.admin_list);
                        let user_list = data.admin_list;
                        for (let i = 0, len = user_list.length; i < len; i++) {
                            html += '<p class="clearfix" user_id="' + user_list[i]['id'] + '"  >'
                                + '<img src="' + user_list[i]['head_img'] + '" /><span>' + user_list[i]['username'] + '</span></p>';
                        }
                        $('#user_list').append(html);//更新列表
                        choose_user();
                        break;

                    case 'history_chat'://TODO 获取聊天数据（保存在redis，后续考虑加入mysql或者文件缓存）
                        if (data.to_id > 0) {//
                            $('#msg_private').empty();
                            $('#msg_private').append(data.msg);
                        }
                        break;
                    default:
                        console.log(data.type);
                        break;

                }
            };

            socket.onclose = function () {
                $(".msg_box").append("<br /><span class='leave_msg'>断开连接...</span>");
                //聊天窗口下拉保持最下
                $('#msg_public').scrollTop($('#msg_public')[0].scrollHeight);
                $('#user_list').empty();//清除列表记录
            };
            /* 切换私聊对象的时候更新私聊数据 */
            function choose_user(){//一定要在拼接完成后调用来绑定事件
                $('#user_list p').click(function (){
                    $(this).find('span').addClass('user_chosen').parent().siblings().find('span').removeClass('user_chosen');
                    selected_user_id = $(this).attr('user_id');
                    socket.send(package_message('get history_chat', 'history_chat', selected_user_id));
                });
            }

        } catch (exception) {
            $(".msg_box").append("<br /><span class='error'>有错误发生</span>");
            //聊天窗口下拉保持最下
            $('#msg_public').scrollTop($('#msg_public')[0].scrollHeight);
        }
    });

    /* 断开连接 */
    $("#close-link").click(function () {
        $("#close-link").hide();
        $("#open-link").show();
        let msg_data = package_message('link-off', 'link-out');
        socket.send(msg_data);
        socket.close();
    });

    /* 群聊 */
    $("#send-message-public").click(function () {
        /* 检查文本框是否为空 */
        if ($("#data").val() == "") {
            alert("请输入数据！");
            return;
        }
        try {
            socket.send(package_message($("#data").val(), 'chat_public'));
        } catch (exception) {
            $("#note-public").append("<br />发送数据出错");
        }
        /* 清空文本框 */
        $("#data").val("");
    });

    /* 私聊 */
    $("#send-message-private").click(function () {
        /* 检查文本框是否为空 */
        if ($("#data").val() == "") {
            layui.msg("请输入数据！");
            return;
        } else if (selected_user_id <= 0) {
            layui.msg("请选中聊天对象");
            return;
        }
        try {
            // var send = package_message($("#data").val(), 'chat_private');
            socket.send(package_message($("#data").val(), 'chat_private'));
        } catch (exception) {
            $("#note-private").append("<br />发送数据出错");
        }
        /* 清空文本框 */
        $("#data").val("");
    });


});